<template>
	<view class="content">
		<navigationCustom :config="config" @customConduct="customConduct" />
		<view class="box">
			<!-- 用户信息 -->
			<view class="info">
				<view class="portrait">
					<image :src="userInfo.avatarUrl" mode="aspectFit"></image>
				</view>
				<view class="info-b">
					<view class="nickname font32 fontw fontc">
						{{userInfo.nickName}}
					</view>
					<view class="JobId font24 fontc">
						工号： {{userInfo.uniacid || userInfo.id}}
					</view>
				</view>
			</view>
			<!-- 财务模块 -->
			<view class="finance">
				<view class="item" v-for="(item,index) in d_financeList" :key="index" @click="to(item.path)">
					<view class="icon">
						<image :src="item.icon" mode="aspectFit"></image>
					</view>
					<view class="itemInfo">
						<view class="title font30">
							{{item.title}}
						</view>
						<view class="des font20">
							{{item.des}}
						</view>
					</view>
				</view>
			</view>
			<!-- 横幅 -->
			<view class="hengfu" @click="hengfu">
				<image src="https://wx.caobenjiankang.com/image/heng.png" mode="widthFix"></image>
			</view>
			<!-- 其他 -->
			<view class="othre">
				<view class="title font32 font600">
					其他功能
				</view>
				<view class="othreBox">
					<view class="item" v-for="(item,index) in d_othreList" :key="index" @click="to(item.path)">
						<view class="icon">
							<image :src="item.icon" mode="aspectFit"></image>
						</view>
						<view class="title font30">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import image from "../../uni_modules/uview-ui/libs/config/props/image"
	import navigationCustom from "@/components/struggler-navigationCustom/navigation-custom"
	export default {
		data() {
			return {
				config: {
					title: "", //title
					bgcolor: "#c1a379", //背景颜色
					type: 4, //type 1，3胶囊 2，4无胶囊模式
					transparent: true, //是否背景透明 默认白色
					linear: false, //是为开启下滑渐变
					share: false, //是否将主页按钮显示为分享按钮
				},
				userInfo: {}, //用户信息
				d_financeList: [{
						icon: 'https://wx.caobenjiankang.com/image/ziliao.png',
						title: '知识分享',
						des: '分享养生知识',
						path: '/technicianadd/pages/knowledge/knowledge'
					},
					{
						icon: 'https://wx.caobenjiankang.com/image/collection.png',
						title: '服务记录',
						des: '点击查看服务记录',
						path: '/doctor/pages/Service/Service'
					}
				], //财务模块数据
				d_othreList: [{
					icon: 'https://wx.caobenjiankang.com/image/info.png',
					title: '客户档案',
					path: '/technicianadd/pages/vip/vip'
				}, {
					icon: 'https://wx.caobenjiankang.com/image/upTime.png',
					title: '养生建议',
					path: '/doctor/pages/advice/advice'
				}, {
					icon: 'https://wx.caobenjiankang.com/image/footprint.png',
					title: '我的足迹',
					path: '/zxcadd/about/history'
				}, {
					icon: 'https://wx.caobenjiankang.com/image/Shopping.png',
					title: '购物车',
					path: '/zxcadd/shop/cart'
				}, {
					icon: 'https://wx.caobenjiankang.com/image/add.png',
					title: '我的地址',
					path: '/user/pages/address/list'
				}, {
					icon: 'https://wx.caobenjiankang.com/image/customer.png',
					title: '在线客服',
					path: ''
				}, {
					icon: 'https://wx.caobenjiankang.com/image/lecture.png',
					title: '请客',
					path: '/zxcadd/about/guests'
				}, {
					icon: 'https://wx.caobenjiankang.com/image/qiehuan.png',
					title: '切换用户端',
					path: '/pages/mine'
				}], //其他功能模块
				configInfo: {}
			}
		},
		onPageScroll(e) {},
		components: {
			navigationCustom
		},
		onLoad() {
			const user = uni.getStorageSync('userInfo')
			this.userInfo = user
			const config = uni.getStorageSync('configInfo')
			this.configInfo = config
		},
		methods: {
			customConduct() {
				console.log("ssssss")
			},
			// 财务模块跳转
			to(path) {
				if (path == '/pages/mine') {
					uni.navigateTo({
						url: path
					})
				}
				if (path == '') {
					if (text == '联系客服') {
						let {
							mobile: url,
							im_type
						} = this.configInfo
						// #ifdef MP-WEIXIN
						if (im_type == 2) return
						// #endif
						this.$util.goUrl({
							url,
							openType: 'call'
						})
						return
					}
				}
				uni.navigateTo({
					url: path
				})
			},
			// 横幅
			hengfu() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100% 33%;
		height: 100vh;
		overflow-y: auto;
	}

	.box {
		padding: 32rpx 42rpx 0 32rpx;

		// 用户信息
		.info {
			display: flex;
			align-items: center;
			margin-bottom: 115rpx;

			.portrait {
				height: 112rpx;
				width: 112rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					height: 112rpx;
					width: 112rpx;
				}
			}

			.info-b {
				height: 112rpx;
				margin-left: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
			}
		}

		// 财务模块
		.finance {
			padding: 42rpx 42rpx 42rpx 50rpx;
			background-color: #fff;
			border-radius: 32rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.item {
				display: flex;
				align-items: center;

				.icon {
					width: 55rpx;
					height: 55rpx;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 55rpx;
						height: 55rpx;
					}
				}

				.itemInfo {
					margin-left: 12rpx;

					.title {
						color: #333333;
					}

					.des {
						color: #666666;
					}
				}
			}

			.item:nth-child(3) {
				margin-bottom: unset;
			}

			.item:nth-child(4) {
				margin-bottom: unset;
			}
		}

		// 横幅
		.hengfu {
			margin-bottom: 50rpx;

			image {
				width: 100%;
			}
		}

		// 其他
		.othre {
			padding: 0 30rpx;

			.title {}

			.othreBox {
				margin-top: 48rpx;
				padding: 0 12rpx;
				display: flex;
				flex-wrap: wrap;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 25%;
					margin-bottom: 48rpx;

					.icon {
						width: 50rpx;
						height: 50rpx;
						overflow: hidden;
						margin-bottom: 18rpx;

						image {
							width: 50rpx;
							height: 50rpx;
						}
					}

					.title {}
				}
			}
		}
	}
</style>